<template>
  <div class="open-config">
    <div v-if="!showSecondary" class="main">
      <je-list
        class="JE_OPEN_WX"
        :title="$t('open.wx')"
        :info="$t('open.wxTip')"
        :is-show="true"
        @listClick="($event) => listClick('JE_OPEN_WX', $event)"
      />
      <je-list
        class="JE_OPEN_DD"
        :title="$t('open.dd')"
        :info="$t('open.ddTip')"
        :is-show="true"
        @listClick="($event) => listClick('JE_OPEN_DD', $event)"
      />
      <!-- <je-list
        class="JE_OPEN_FS"
        :title="$t('open.fs')"
        :info="$t('open.fsTip')"
        :is-show="true"
        @listClick="($event) => listClick('JE_OPEN_FS', $event)"
      />
      <je-list
        class="JE_OPEN_WELINK"
        :title="$t('open.we')"
        :info="$t('open.weTip')"
        :is-show="true"
        @listClick="($event) => listClick('JE_OPEN_WELINK', $event)"
      /> -->
    </div>
    <div v-else class="secondary">
      <OpenSecondary :secondary-name="secondaryName" :data-all="dataAllSon" @showMain="showMain" />
    </div>
  </div>
</template>

<script>
  import VueEvent from '@/helper/model/event';
  import JeList from '@/components/je-list.vue';
  import OpenSecondary from './open-secondary.vue';
  import { defineComponent, onUnmounted, reactive, ref } from 'vue';
  import { onScroll } from '@/utils/utils';
  import { Modal } from '@jecloud/ui';

  export default defineComponent({
    name: 'OpenConfig',
    components: {
      JeList,
      OpenSecondary,
      // eslint-disable-next-line
      Modal,
    },
    props: {
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      const dataAllSon = reactive(props.dataAll);
      const formState = reactive({});
      let meta = {};
      meta = JSON.parse(JSON.stringify(formState));
      // 数据是否改吧
      const isChange = () => {
        return meta.JE_SYS_DOCUMENT === formState.JE_SYS_DOCUMENT;
      };
      // 左侧菜单栏是否允许跳转
      const changeBar = () => {
        VueEvent.emit('saveResult', isChange());
      };
      // 是否显示二级页面
      const showSecondary = ref(false);
      // 二级页面的名字
      const secondaryName = ref(null);
      // 去相应子页面
      const listClick = (val, bol) => {
        showSecondary.value = bol;
        secondaryName.value = val;
      };
      // 关闭子页面
      const showMain = (val) => {
        showSecondary.value = val;
      };
      // 左侧导航栏的点击回调
      const isSaveCallback = () => {
        if (showSecondary.value) return false;
        if (isChange()) return changeBar();
      };
      // 搜索：去子页面
      const toSubpage = (data) => {
        const { name, parentName } = { ...data };
        if (parentName) {
          listClick(name, true);
        }
      };
      // 滚动及淡入动画
      const onScrolled = () => {
        showSecondary.value = false;
        setTimeout(() => {
          onScroll();
        }, 100);
      };

      // 保存回调
      const clickCallback = () => {
        // 如果显示了子页面就不提示
        if (!showSecondary.value) {
          Modal.notice('无数据操作!', 'info');
        }
      };
      VueEvent.on('isSave', isSaveCallback);
      VueEvent.on('toSubpage', toSubpage);
      VueEvent.on('fadeScroll', onScrolled);
      VueEvent.on('toolbarSaveEventS', clickCallback);
      onUnmounted(() => {
        VueEvent.off('isSave', isSaveCallback);
        VueEvent.off('toSubpage', toSubpage);
        VueEvent.off('toolbarSaveEventS', clickCallback);
        VueEvent.off('fadeScroll', onScrolled);
      });

      return { showSecondary, formState, listClick, showMain, secondaryName, dataAllSon };
    },
  });
</script>

<style>
  .open-config {
    padding: 30px 100px;
  }
</style>
